<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="./js/vue.js"></script>
<body>
    <div class="box">
        <!-- {{}} 双大括号表达式或者称为 Mustache语法，作用就是显示data中的数据 
        mustache语法中既可以写变量，也可以写表达式
        -->
        <h1>{{name}}</h1>
        <h2>{{msg}}</h2>
        <!-- 也可以写表达式 -->
        <!-- 三元表达式 -->
        <!-- 条件？答案1：答案2 -->
        <!-- 语句 
        var xx = xx;
        表达式
        三元表达式
        a++
        ++a
        a--
        --a
        msg.toUpperCase()
        -->
        <h3>{{flag?answerY:answerN}}</h3>

    </div>
    <div>
        <h1>{{name}}</h1>
    </div>
    <div class="box2">
        <h1>{{msg}}</h1>
    </div>
    <div class="box3">
        <h1>{{name}}</h1>
        <h2>{{obj.name}}</h2>
    </div>
    <script>
        // vue是渐进式的JavaScript框架，只关心视图层，主要进行声明式渲染，动态构建用户界面。
        // 数据驱动视图  只关心视图层
        // vue当中不操作dom
        // MVVM Model-view-viewModel
        // vue不兼容ie8及以下版本

        let vm = new Vue({//配置对象
            el:'.box',//在哪个元素当中使用vue语法
            data:{//data对象中的所有属性都加入到vue响应式系统，值一更改，视图也会发生变化，只更改数据即可
                name:'王洋洋',
                msg:'你准备笔记本了吗？',
                flag:false,
                answerY:'带笔记本了',
                answerN:'没带'
            }
        })
        // vm是Vue的实例对象
        console.log(vm);
        // vm该对象上有很多挂着$的方法，这些方法都是vue实例对象上的方法
        // 配置对象中data的属性在哪些地方能看见？
        // vm实例对象上  vm._data  vm.$data
        vm.name = '李思哲';
        console.log(vm);

        let data = {
            msg:'xxx'
        }
        // 冻结对象,阻断数据的响应式追踪
        // Object.freeze(data);
        let vm2 = new Vue({
            el:'.box2',
            data
        })
        vm2.msg = 'yyy'

        let obj = {
                    name:'tom',
                    age:18
                };
        Object.freeze(obj);        

        let vm3 = new Vue({
            el:'.box3',
            data:{
                obj,
                name:'jack'
            }
        })
        console.log(vm3);
        vm3.name = 'rose';
        vm3.obj.name = 'test';
    </script>
</body>
</html>